﻿@page "/bar/bar3"
@attribute [RouteName("ECharts 入门示例|(切换主题演示)")]
@using Blazor.ECharts.Options
@using Blazor.ECharts.Options.Enum
@using B = Blazor.ECharts.Options.Series.Bar

<div>
    <InputSelect ValueExpression="@(() => Year)" ValueChanged="@((int year) => OnValueChanged(year))">
        <option value="2020">2020</option>
        <option value="2021">2021</option>
        <option value="2022">2022</option>
    </InputSelect>
    <button @onclick="ChangeTheme">切换主题 @theme</button>
</div>

<div class="chart-container">
    <EBar Option="@Option1" Class="chart-fill" Theme="@theme"></EBar>
</div>

@code {
    private EChartsOption<B.Bar> Option1;
    private int Year;
    private string theme = "light";

    protected override void OnInitialized()
    {
        base.OnInitialized();

        Option1 = new()
        {
            Title = new()
            {
                Text = "ECharts 入门示例"
            },
            Tooltip = new()
            {
                Trigger = TooltipTrigger.Axis,
                TriggerOn = "mousemove|click",
                ValueFormatter = new("(value) => value.toFixed(2) + '元'")
            },
            Legend = new()
            {
                Data = new[] { "销量" }
            },
            XAxis = new()
            {
                new() { Data = new[] { "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" } }
            },
            YAxis = new()
            {
                new()
            },
            Series = new()
            {
                new B.Bar
                {
                    Name = "销量",
                    Data = new[] { 5, 20, 36, 10, 10, 20 }
                }
            }
        };
    }

    private Task OnValueChanged(int year)
    {
        Year = year;
        Option1.Title.Text = $"{year} 年 ECharts 入门示例";
        switch (year)
        {
            case 2020:
                (Option1.Series[0] as B.Bar).Data = new[] { 6, 21, 37, 11, 11, 21 };
                break;
            case 2021:
                (Option1.Series[0] as B.Bar).Data = new[] { 7, 21, 37, 11, 11, 21 };
                break;
            case 2022:
                (Option1.Series[0] as B.Bar).Data = new[] { 6, 22, 37, 11, 11, 21 };
                break;
        }
        //通知组件其状态已更改。 如果适用，这将导致重新呈现组件
        StateHasChanged();
        return Task.CompletedTask;
    }

    private Task ChangeTheme()
    {
        theme = theme == "light" ? "dark" : "light";
        //通知组件其状态已更改。 如果适用，这将导致重新呈现组件
        StateHasChanged();
        return Task.CompletedTask;
    }
}